<script setup>
import {ref} from "vue";

const tableData = ref([{
  purchaseNumber: 'K250000001',
  supplier: '华为',
  productNo: 'A00002',
  productName: '圆珠笔',
  num: 200,
  numIn: 200,
  numRefund: 200,
  numSend: 200,
  numUnqualified: 200,
  numLeft: 100,
  unit: '个',
  deliveryDate: '2025-05-01'
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  productNo: 'A00002',
  productName: '圆珠笔',
  num: 200,
  numIn: 200,
  numRefund: 200,
  numSend: 200,
  numUnqualified: 200,
  numLeft: 100,
  unit: '个',
  deliveryDate: '2025-05-01'
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  productNo: 'A00002',
  productName: '圆珠笔',
  num: 200,
  numIn: 200,
  numRefund: 200,
  numSend: 200,
  numUnqualified: 200,
  numLeft: 100,
  unit: '个',
  deliveryDate: '2025-05-01'
}, {
  purchaseNumber: 'K250000001',
  supplier: '华为',
  productNo: 'A00002',
  productName: '圆珠笔',
  num: 200,
  numIn: 200,
  numRefund: 200,
  numSend: 200,
  numUnqualified: 200,
  numLeft: 100,
  unit: '个',
  deliveryDate: '2025-05-01'
}]);

function tableRowClassName(rowIndex){

  if (rowIndex.rowIndex % 2 !== 0) {
    console.log('rowIndex',rowIndex.rowIndex)
    return 'evenRow';
  }
  return 'oddRow';
}
</script>

<template>
  <div class='moduleTable'>
    <!-- //设置表格头的样式和字体 -->
    <el-table :data="tableData"  style="width: 100%;margin:0 auto; padding: 17px 0;
                --el-table-border-color: none;
                --el-table-bg-color: none;
                --el-table-tr-bg-color: none"
              :row-class-name='tableRowClassName'
              :cell-style="{'color':'#FFFFFF','text-align':'center'}"
              :header-cell-style="{'background':'#375A88','color':'rgba(2,217,253,0.8)','text-align':'center'}"
    >
      <el-table-column prop="purchaseNumber" label="采购单号" />
      <el-table-column type="index" label="采购单行号" width="100" />
      <el-table-column prop="supplier" label="供应商"  />
      <el-table-column prop="productNo" label="产品编号"  />
      <el-table-column prop="productName" label="产品名称" />
      <el-table-column prop="unit" label="单位" />
      <el-table-column prop="num" label="订购数量" />
      <el-table-column prop="numSend" label="已发货数量" />
      <el-table-column prop="numUnqualified" label="不合格数量" />
      <el-table-column prop="numRefund" label="已退货数量" />
      <el-table-column prop="numIn" label="已入库数量" />
      <el-table-column prop="numLeft" label="订单剩余数量" />
      <el-table-column prop="deliveryDate" label="要求交货时间" />

    </el-table>
  </div>
</template>

<style scoped>

</style>